<template>
  <div class="miaosha">
    <div class="title">
      <div class="img">
        <img src="@/assets/images/title-ms.png" alt>
      </div>
      <div class="time">
        <!-- 小时 -->
        <span>{{ hours }}</span>
        <i>:</i>
        <!-- 分钟 -->
        <span>{{ mins }}</span>
        <i>:</i>
        <!-- 秒钟 -->
        <span>{{ secs }}</span>
      </div>
    </div>
    <!-- 秒杀tab切换 -->
    <div class="ms-content">
      <ul class="ms-tabs">
        <li
          :class="{ active: getSeckillListData.id == flag }"
          v-for="getSeckillListData in getSeckillListDatas.time_list"
          :key="getSeckillListData.id"
          @click="changeSeckillTime(getSeckillListData.id)"
        >
          <h2>{{ getSeckillListData.title }}</h2>
          <p>抢购中</p>
        </li>
      </ul>
      <div class="ms-list">
        <ul>
          <li
            v-for="getSeckillListData in getSeckillListDatas.seckill_list"
            :key="getSeckillListData.id"
          >
            <div class="img">
              <img :src="getSeckillListData.goods_thumb" alt>
            </div>
            <h3>{{ getSeckillListData.goods_name }}</h3>
            <p class="price">{{ getSeckillListData.shop_price }}</p>
            <p class="dprice">{{ getSeckillListData.market_price }}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hours: "00",
      mins: "00",
      secs: "00",
      timer: null,
      flag: 16
    };
  },
  methods: {
    miaosha() {
      // console.log(new Date());
      //秒杀
      //当前时间
      //目标时间
      //时间差=目标时间-当前时间
      let nowTime = new Date(); //当前时间
      let targetTime = new Date("2021-08-09 18:00:00");
      let time = (targetTime - nowTime) / 1000;
      //   console.log(time);
      //计算剩余多少小时
      this.hours = Math.floor(time / 3600);
      if (this.hours <= 9 && this.hours >= 0) {
        this.hours = "0" + this.hours;
      }
      //计算剩余多少分钟
      this.mins = Math.floor((time % 3600) / 60);
      if (this.mins <= 9 && this.mins >= 0) {
        this.mins = "0" + this.mins;
      }
      //计算出剩余多少秒
      this.secs = Math.floor(time % 60);
      if (this.secs <= 9 && this.secs >= 0) {
        this.secs = "0" + this.secs;
      }
    },
    changeSeckillTime(id) {
      // console.log(id);
      this.flag = id;
      this.$store.dispatch("actChangeSeckillListDatas", {
        id: id
      });
    }
  },
  computed: {
    getSeckillListDatas() {
      return this.$store.state.seckillListDatas;
    }
  },
  mounted() {
    //派遣actions中定义的方法actChangeSeckillListDatas
    this.$store.dispatch("actChangeSeckillListDatas", {
      id: this.flag
    });
    // this.flag = this.$store.state.seckillListDatas.time_list[0].id;
    this.timer = setInterval(this.miaosha, 1000);
  },
  destroyed() {
    clearInterval(this.timer);
  }
};
</script>

<style lang="less">
.miaosha {
  .title {
    width: 100%;
    height: 4.4rem;
    display: flex;
    justify-content: space-between;
    img {
      height: 2rem;
      margin-top: 1.2rem;
      margin-left: 1rem;
    }
    .time {
      margin-right: 1rem;
      span {
        display: inline-block;
        width: 3rem;
        height: 2rem;
        background: red;
        color: #fff;
        text-align: center;
        line-height: 2rem;
        margin-top: 1.2rem;
        border-radius: 0.6rem;
      }
      i {
        padding: 0 0.5rem;
        font-size: 2rem;
        font-style: normal;
        color: red;
      }
    }
  }
  .ms-content {
    margin-bottom: 10rem;
    .ms-tabs {
      width: 100%;
      display: flex;
      li {
        flex: 1;
        text-align: center;
      }
      .active {
        color: #f55;
        border-bottom: 2px solid #f55;
      }
    }
    .ms-list {
      width: 100%;
      overflow-x: scroll;
      margin-top: 2rem;
      ul {
        width: 300%;
        li {
          float: left;
          width: 11rem;
          height: 19rem;
          img {
            width: 10rem;
            height: 10rem;
          }
          h3 {
            text-overflow: ellipsis;
            width: 80%;
            overflow: hidden;
            white-space: nowrap;
            margin-left: 10%;
          }
          .price {
            font-size: 1.6rem;
            color: #f55;
            text-align: center;
            &::before {
              content: "￥";
            }
          }
          .dprice {
            font-size: 1.2rem;
            color: #666;
            text-align: center;
            text-decoration: line-through;
            &::before {
              content: "￥";
            }
          }
        }
      }
    }
  }
}
</style>